const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const {VueLoaderPlugin} = require("vue-loader")
const config = {
    entry:path.resolve(__dirname,"src/main.js"),
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"[hash]-[name]-bundle.js"
    },
    plugins:[
        new HtmlWebpackPlugin({
            title:"webpack-vue",
            //页面路径
            template:path.resolve(__dirname,"public/index.html")
        }),
        new CleanWebpackPlugin(),
        new VueLoaderPlugin()
    ],
    module:{
        rules:[
            {
                test:/\.css$/i,
                use:["style-loader","css-loader"]
            },
            {
                test:/\.vue$/,
                loader:'vue-loader'
            },
            // 处理需要打包的图片
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource',
            },
            // 处理html模板里的图片路径
            // {
            //     test:/\.html$/,
            //     loader:'html-loader'
            // }
        ]
    },
    devServer:{
        contentBase:"./dist"
    },
    mode:"development"
}
module.exports = config;